<template>
  <div class="new-chunk">
    <!-- 大图 -->
    <div class="new-img-box">
      <div class="new-box-time">时间</div>
    </div>
    <!-- 内容 -->
    <div class="upcoming-title-box">
      <!-- 图片 -->
      <div class="title-samll-img">图片</div>
      <!-- 文字部分 -->
      <div class="title-text">
        <div class="title-text-name">战狼</div>
        <div class="title-text-start">陈奕迅</div>
        <div class="title-text-described">卧底风云</div>
      </div>
      <!-- 按钮 -->
      <div class="title-btn">追剧</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'FissionFriendsH5Contentchunk',

  data() {
    return {}
  },

  mounted() {},

  methods: {}
}
</script>

<style lang="scss" scoped>
.new-chunk {
  width: 343px;
  height: 288px;
  left: 0px;
  top: 0px;
  border-radius: 4px;
  margin: 0 16px 16px 16px;
  /* Inside auto layout */

  flex: none;
  order: 0;
  flex-grow: 0;
  //   margin: 16px 0px;
  .new-img-box {
    position: relative;
    width: 343px;
    height: 200px;
    left: 0px;
    top: 0px;
    background-color: bisque;
    .new-box-time {
      position: absolute;
      width: 35px;
      height: 16px;
      right: 0px;
      bottom: 0px;

      font-family: 'SF Pro Text';
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 16px;
      text-align: center;
      background-color: #747880;
      color: #ffffff;
      flex: none;
      order: 0;
      flex-grow: 0;
      margin: 10px 10px;
    }
  }
  .upcoming-title-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0px;
    position: relative;
    width: 343px;
    height: 88px;
    background-color: pink;
    // 小图片
    .title-samll-img {
      position: absolute;
      width: 24px;
      height: 35.62px;
      left: 16px;
      top: 16px;
      background-color: #ccc;
      /** background: url(); //待用 */
    }
    // 文字部分
    .title-text {
      position: absolute;
      width: 204px;
      height: 64px;
      left: 56px;
      top: 16px;
      background-color: aqua;
      //   电影名
      .title-text-name {
        width: 84px;
        height: 20px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 500;
        font-size: 14px;
        line-height: 20px;
        // text-align: right;
        color: #e7e8ea;
        margin: 4px 0px;
      }
      //   演员
      .title-text-start {
        width: 132px;
        height: 16px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 400;
        font-size: 10px;
        line-height: 16px;

        display: flex;
        align-items: center;
        color: #747880;
      }
      //   描述
      .title-text-described {
        position: static;
        width: 204px;
        height: 20px;
        font-family: 'PingFang SC';
        font-style: normal;
        font-weight: 500;
        font-size: 12px;
        line-height: 20px;
        color: #e7e8ea;
      }
    }
    // 按钮
    .title-btn {
      /* Frame 721 */
      /* Auto layout */
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      padding: 4px 16px;

      position: absolute;
      width: 80px;
      height: 24px;
      right: 16px;
      top: 16px;
      /* primary/color-primary-dark */
      background: #d74f81;
      border-radius: 4px;
    }
  }
}
</style>
